<template>
  <view class="container">
    <view class="header">
      <text class="title">{{ fieldTitleMap[field] }}指标详情</text>
    </view>

    <!-- 历史记录列表 -->
    <view v-if="records.length > 0" class="record-list">
      <view class="record-item" v-for="(item, index) in records" :key="index">
        <view class="left"><text class="time">{{ item.time }}</text></view>
        <view class="right">
          <!-- 动态添加颜色 -->
          <text class="value" :class="item.status">{{ item.value }}</text>
          <text class="unit">{{ unitMap[field] }}</text>
        </view>
      </view>
    </view>

    <view v-else class="empty">
      <text>暂无指标记录</text>
    </view>
  </view>
</template>

<script>
import { getUserIndicatorList } from '@/common/api.js'

export default {
  data() {
    return {
      field: '',
      records: [],
      fieldTitleMap: {
        sbp: '收缩压',
        dbp: '舒张压',
        bloodSugar: '血糖',
        tc: '总胆固醇',
        ldlC: '低密度脂蛋白胆固醇',
        hdlC: '高密度脂蛋白胆固醇',
        tg: '甘油三酯',
        height: '身高',
        weight: '体重',
        bmi: '体质指数',
        waist: '腰围',
        exerciseDuration: '锻炼时长',
        smoke: '吸烟',
        drink: '饮酒',
        vegFruit: '蔬果摄入'
      },
      unitMap: {
        sbp: 'mmHg',
        dbp: 'mmHg',
        bloodSugar: 'mmol/L',
        tc: 'mmol/L',
        ldlC: 'mmol/L',
        hdlC: 'mmol/L',
        tg: 'mmol/L',
        height: 'cm',
        weight: 'kg',
        bmi: '',
        waist: 'cm',
        exerciseDuration: '分钟',
        smoke: '支',
        drink: '克',
        vegFruit: '份'
      }
    }
  },

  onLoad(options) {
    this.field = options.field || ''
    console.log('传入的字段：', options.field)
    this.loadFieldData()
  },

  methods: {
    getStatus(title, value) {
      const v = parseFloat(value)
      switch (title) {
        case '收缩压':
		    if (v >= 90 && v <= 120){
				return 'normal';
			}else if (v > 120 && v < 139){
		      return 'high';
		    } else{
				return 'danger';
			}
        case '舒张压':
		    if (v >= 60 && v <= 80){
				return 'normal';
			}else if (v > 80 && v < 89){
		      return 'high';
		    } else{
				return 'danger';
			}
        case '血糖':
			if (v < 6.1){
				return 'normal';
			}else if (v >= 6.1 && v < 7.0){
			  return 'high';
			} else{
				return 'danger';
			}
        case '总胆固醇':
			if (v < 5.18){
				return 'normal';
			}else if (v >= 5.18 && v < 6.22){
			  return 'high';
			} else{
				return 'danger';
			}
        case '低密度脂蛋白胆固醇':
		    if (v < 3.37){
		    	return 'normal';
		    }else if (v >= 3.37 && v < 4.14){
		      return 'high';
		    } else{
		    	return 'danger';
		    }
        case '高密度脂蛋白胆固醇':
          return v < 1.04 ? 'danger' : 'normal'
		case '甘油三酯':
			if (v < 1.7){
				return 'normal';
			}else if (v >= 1.7 && v < 2.26){
			  return 'high';
			} else{
				return 'danger';
			}
		case '腰围':
			if (v < 85){
				return 'normal';
			}else if (v >= 85 && v < 90){
			  return 'high';
			} else{
				return 'danger';
			}
        default:
          return 'normal'
      }
    },

    async loadFieldData() {
      try {
        const res = await getUserIndicatorList()
        const allData = res?.data || []

        const filtered = allData
          .filter(item => item[this.field] != null)
          .map(item => {
            const title = this.fieldTitleMap[this.field] || ''
            const val = item[this.field]
            const status = this.getStatus(title, val)
            return {
              value: val,
              time: item.createTime || item.recordTime || '未知时间',
              status
            }
          })

        this.records = filtered
        console.log('当前字段：', this.field)
        console.log('历史记录：', this.records)
      } catch (err) {
        console.error('加载指标记录失败', err)
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  background-color: #f7f7fa;
  min-height: 100vh;
  padding: 30rpx;

  .empty {
    text-align: center;
    padding: 80rpx 20rpx;
    font-size: 28rpx;
    color: #999;
  }

  .header {
    padding: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    text-align: center;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .record-list {
    .record-item {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 20rpx 30rpx;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);

      .time {
        font-size: 28rpx;
        color: #666;
      }

      .value {
        font-size: 32rpx;
        font-weight: bold;
        margin-right: 6rpx;
      }

      /* 动态颜色 */
      .normal {
        color: #52c41a; /* 绿色 正常 */
      }
      .high {
        color: #faad14; /* 橙色 偏高 */
      }
      .danger {
        color: #ff4d4f; /* 红色 危险 */
      }

      .unit {
        font-size: 26rpx;
        color: #999;
      }
    }
  }
}
</style>
